<template>
    <div class="activity" @click="goActivity('19')">
        <div class="activity-list">
            <img
                class="activity-item1"
                src="@/assets/images/home/home-activity-1.png"
                @click.stop="goActivity('17')"
            />
            <img
                class="activity-item1"
                src="@/assets/images/home/home-activity-2.png"
                @click.stop="goActivity('18')"
            />
            <img
                class="activity-item2"
                src="@/assets/images/home/home-activity-3.png"
                @click.stop="goActivity('19')"
            />
        </div>
        <img
            class="vip-entrance-img"
            src="@/assets/images/home/vip-entrance-2.png"
            @click.stop="goExperience"
        />
    </div>
</template>

<script>
export default {
    name: 'Activity2',
    props: ['isVip'],
    methods: {
        goExperience() {
            this.$router.push('/experience')
        },
        goActivity(value) {
            this.$router.push('/activity_1?goodsType=' + value)
        }
    }
}
</script>

<style lang="stylus" scoped>
.activity
    padding 5rem 0.27rem 0.27rem 0.25rem
    background-color #fff
    background-image url('../../../assets/images/home/618.png')
    background-size 100% auto
    background-repeat no-repeat
    .activity-list
        display flex
        flex-wrap wrap
        justify-content space-between
        align-items center
        .activity-item1
            width 4.67rem
        .activity-item2
            width 100%
            margin-top 0.13rem
    .vip-entrance-img
        width 100%
        margin-top 0.2rem
</style>

